<template>
	<view class="example-body">
		<uni-segmented-control :current="current" :values="items" style-type="text" active-color="#2D82F6" @clickItem="onClickItem" style="margin-bottom: 20px;" />
		<uni-grid :column="2" :show-border="false" :square="false" @change="change">
			<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
				<view class="grid-item-box">
					<image class="image" :src="item.code" mode="scaleToFill" />
					<text class="text">{{ item.text }}</text>
					<view class="grid-dot">
						<uni-tag text="运营中" v-if="item.isrun == 1" size="small" type="primary" :circle="true" />
						<uni-tag text="停运" v-else size="small" type="success" :circle="true" />
					</view>
					<view class="switch-buttom">
						<switch color="#30D39C" style="transform: scale(0.7)"/>
					</view>
				</view>
			</uni-grid-item>
			<cell class="loading-more" v-if="list.length == 0">
				<image style="width:450rpx;height:450rpx;margin-top: 300rpx;margin-left: 50px;" src="../../static/icon/noData.png"></image>
			</cell>
		</uni-grid>
	</view>
</template>
<script>
import { mapGetters } from 'vuex'
import { list } from '../../api/device'
import base from '@/config/baseUrl'
export default {
	data() {
		return {
			list: [],
			current: 0,
			items: ['全部', '运营中', '停运'],
			queryParam: { pageNum: 1, pageSize: 999, devtypebm: 'DONGPINGHU_PLATFORM_DEVICE' }
		}
	},
	computed: { ...mapGetters({ userInfo: 'userInfo' }) },
	onLoad() {
		this.getBusinessData()
	},
	methods: {
		//获取处置状态
		getBusinessData() {
			let index = 0
			list(this.queryParam).then(res => {
				this.list = []
				res.rows.forEach(item => {
					this.list.push({
						code: base.baseUrl + '/' + item.url,
						text: item.devname,
						url: './edit?id=' + item.devname + '&devbm=' + item.devbm,
						isrun: item.isrun
					})
					index++
				})
			})
		},
		change(e) {
			// uni.navigateTo({ url: this.list[e.detail.index].url })
		},
		onClickItem(e) {
			if (e.currentIndex == 0) {
				this.queryParam = { pageNum: 1, pageSize: 999, devtypebm: 'DONGPINGHU_PLATFORM_DEVICE' }
				this.getBusinessData()
			} else if (e.currentIndex == 1) {
				this.queryParam = { pageNum: 1, pageSize: 999, devtypebm: 'DONGPINGHU_PLATFORM_DEVICE', isrun: '1' }
				this.getBusinessData()
			} else if (e.currentIndex == 2) {
				this.queryParam = { pageNum: 1, pageSize: 999, devtypebm: 'DONGPINGHU_PLATFORM_DEVICE', isrun: '0' }
				this.getBusinessData()
			}
		}
	}
}
</script>

<style>
/* 头条小程序组件内不能引入字体 */
/* #ifdef MP-TOUTIAO */
@font-face {
	font-family: uniicons;
	font-weight: normal;
	font-style: normal;
	src: url('~@/static/uni.ttf') format('truetype');
}

/* #endif */
/* #ifndef APP-NVUE */
page {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	background-color: #efeff4;
	min-height: 100%;
	height: auto;
}

view {
	font-size: 14px;
	line-height: inherit;
}

.example {
	padding: 0 15px 15px;
}

.example-info {
	padding: 15px;
	color: #3b4144;
	background: #ffffff;
}

.example-body {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	padding: 0;
	font-size: 14px;
	background-color: #ffffff;
	height: 1450rpx;
}

/* #endif */
.example {
	padding: 0 15px;
}

.example-info {
	/* #ifndef APP-NVUE */
	display: block;
	/* #endif */
	padding: 15px;
	color: #3b4144;
	background-color: #ffffff;
	font-size: 14px;
	line-height: 20px;
}

.example-info-text {
	font-size: 14px;
	line-height: 20px;
	color: #282830;
}

.example-body {
	flex-direction: column;
	padding: 15px;
	background-color: #ffffff;
}

.word-btn-white {
	font-size: 18px;
	color: #ffffff;
}

.word-btn {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	height: 48px;
	margin: 15px;
	background-color: #007aff;
}

.word-btn--hover {
	background-color: #4ca2ff;
}

.image {
	width: 100%;
	height: 350rpx;
}

.text {
	font-size: 35rpx;
	margin-top: 10rpx;
	width: 100%;
	font-weight: 500;
}

.example-body {
	/* #ifndef APP-NVUE */
	display: block;
	/* #endif */
}

.grid-dynamic-box {
	margin-bottom: 15px;
}

.grid-item-box {
	flex: 1;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 15px 5px;
	border: 0px solid #000000;
}

.grid-dot {
	position: absolute;
	top: 30px;
	left: 10px;
}

.switch-buttom{
	position: absolute;
	bottom: 30px;
	right: 10px;
}


.swiper {
	height: 420px;
}

/* #ifdef H5 */
@media screen and (min-width: 768px) and (max-width: 1425px) {
	.swiper {
		height: 630px;
	}
}

@media screen and (min-width: 1425px) {
	.swiper {
		height: 830px;
	}
}

/* #endif */
</style>
